<template>
  <uni-popup ref="popup" type="bottom" background-color="#fff" mask-background-color="rgba(0,0,0,0.2)">
    <view class="popup-camera">
      <view class="list-wrap">
        <view class="item" v-for="(item, index) in data.list" :key="index" @tap="selectItem(item)">
          {{ item.name }}
        </view>
      </view>
      <view class="bottom-wrap">
        <button class="bnt-wrap bnt" @tap="close">取消</button>
      </view>
    </view>
  </uni-popup>
</template>
<script lang="ts" setup>
const data = reactive({
  list: [] as any,
  selectItem: {} as any,
});

const popup = ref();
const open = (arr: any) => {
  data.list = arr || [];
  popup?.value?.open();
};
const close = () => {
  popup?.value?.close();
};

// 点击事件
const emit = defineEmits(['set-item']);
const selectItem = (item: any) => {
  data.selectItem = item;
  emit('set-item', item.type);
  close();
};

defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.popup-camera {
  border-radius: 8px 8px 0 0;
  position: relative;
  top: 12px;
  left: 16px;
  bottom: 20px;
  width: calc(100% - 32px);

  .list-wrap {
    width: 100%;
    font-size: 16px;

    .item {
      width: 100%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
      text-align: center;
    }
  }

  .bottom-wrap {
    height: 96px;
    display: flex;
    width: 100%;
    bottom: 0;
    background: #fff;
    box-sizing: border-box;

    .bnt {
      height: 44px;
      width: 343px;
      margin-top: 9px;
      border-radius: 50px;
    }
  }
}
</style>